import React, { useEffect, useRef, Component } from 'react';
import {
    Animated,
    View,
    ImageBackground,
    Text,
    StyleSheet,
    NativeModules,
    TouchableOpacity,
    LayoutAnimation
} from 'react-native';


// const FadeAnim = (props) => {
//     //透明度初始值设置为0
//     const fadeAnim = useRef(Animated.Value(0)).current

//     React.useEffect(() => {
//         Animated.timing(
//             //随时间变化而执行动画
//             //fadeAnim从0变为1 时间为10000毫秒
//             fadeAnim, { toValue: 1, duration: 10000 }
//         ).start()//开始执行动画
//     }, [fadeAnim])

//     return (
//         <Animated.View style={{
//             ...props.style,
//             opacity: fadeAnim,
//         }}
//         >
//             {props.children}
//         </Animated.View>
//     )
// }


// export default () => {
//     return (
//         <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
//             <FadeAnim style={{ width: 250, height: 50, backgroundColor: 'powderblue' }}>
//                 <Text style={{ fontSize: 28, textAlign: 'center', margin: 10 }} Fading in></Text>
//             </FadeAnim>

//         </View>
//     )
// }

//LayoutAnimations  全局范围内创建和更新动画 常用来更新布局时

const UIManager = NativeModules
//如果要在Android上使用 LayoutAnimation，那么目前还需要在UIManager中启用
UIManager.setLayoutAnimationEnabledExperimental &&
    UIManager.setLayoutAnimationEnabledExperimental(true);
export default class App extends React.Component {

    state = {
        w: 100,
        h: 100,
    }

    _onPress = () => {
        //Animate the update
        LayoutAnimation.spring()
        this.setState({ w: this.state.w + 15, h: this.state.h + 15 })
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.box, { width: this.state.w, height: this.state.h }}></View>
                <TouchableOpacity onPress={this._onPress}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>Press me!</Text>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center'
    },

    box: {
        width: 200,
        height: 200,
        backgroundColor: 'red'
    },
    button: {
        backgroundColor: 'black',
        paddingHorizontal: 20,
        paddingVertical: 15,
        marginTop: 15
    },
    buttonText: {
        color: '#fff',
        fontWeight: 'bold'
    }
})